<template>
    <div>
        <el-dialog :title="isdisabled?'订单详情':'添加订单'" :visible="true" width="900px" :modal-append-to-body="false"
            :close-on-click-modal="false" @close="handleClose">
            <el-form id="forms" ref="forms" :rules="rulesModel" :model="form" label-width="120px"
                style="max-height: 600px;overflow-y: scroll;">
                <el-form-item label="服务商" prop="phone">
                    <!-- <el-select v-model="form.phone" filterable remote placeholder="请选择" :disabled="isdisabled"
                        :remote-method="getUserList" :loading="shopLoading">
                        <el-option v-for="item in userList" :key="item.userid" :label="item.nickname"
                            :value="item.phone">
                            <span style="float: left">{{ item.nickname }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">手机号：{{ item.phone }}</span>
                        </el-option>
                    </el-select> -->
                    <div class="flex">
                        <el-input v-model="fwsUsername" style="width: 200px;" :disabled="true" placeholder="" />
                        <el-button v-if="!isdisabled" type="primary" @click="openUserList(1)"
                            style="margin-left: 10px;">选择用户</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="服务商手机号" v-if="form.phone">
                    <div>{{ form.phone }}</div>
                </el-form-item>
                <el-form-item label="类型" prop="orderType">
                    <el-select v-model="form.orderType" :disabled="isdisabled" placeholder="请选择">
                        <el-option v-for="item in Object.keys(OrderTypeList)" :label="OrderTypeList[item]"
                            :value="Number(item)" />
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" prop="amt">
                    <el-input v-model.number="form.amt" :disabled="isdisabled" placeholder="请输入金额" />
                </el-form-item>
                <el-form-item label="服务对象" prop="fromUserName">
                    <div class="flex">
                        <el-input v-model="form.fromUserName" style="width: 200px;" clearable :disabled="true"
                            placeholder="" @change="changeUserName" />
                        <el-button v-if="!isdisabled" type="primary" @click="openUserList(2)" style="margin-left: 10px;">选择用户</el-button>
                    </div>
                    <!-- <el-autocomplete v-model="form.fromUserName" :disabled="isdisabled" style="width: 200px;"
                        :fetch-suggestions="querySearchAsync" placeholder="请选择/输入用户名" @select="handleSelect" /> -->
                </el-form-item>
                <el-form-item label="服务对象手机号" v-if="form.fromPhone">
                    <div>{{ form.fromPhone }}</div>
                </el-form-item>
                <el-form-item label="备注">
                    <editor :disabled="isdisabled" v-model="form.orderSource" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button v-if="!isdisabled" :loading="buttonLoading" type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 选择用户弹窗 -->
        <digUserList v-if="modalStatus == 2" @info="handleObject" />
    </div>
</template>

<script>
import { userlist } from "@/api/users.js";
import { OrderAdd } from "@/api/sorder.js";
import editor from "../../../components/Editor/index.vue";
import { GetEnum, coinlist } from "@/api/ctrls.js";
import digUserList from './digUserList.vue'
export default {
    props: {
        info: {
            default: {},
            type: Object
        },
    },
    components: { editor, digUserList },
    data() {
        return {
            form: {}, // 详情实体
            rulesModel: {
                phone: [
                    { required: true, message: '请选择服务商', trigger: 'blur' }
                ],
                amt: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ],
                fromUserName: [
                    { required: true, message: '请选择服务对象', trigger: 'blur' }
                ]
            },
            buttonLoading: false,

            userList: [],// 用户列表
            shopKey: '',
            shopLoading: false,

            OrderTypeList: {}, // 订单类型

            isdisabled: false,

            selectType: 0,
            fwsUsername: '',

            modalStatus: 0, // 打开组件弹窗参数
            currentInfo: {}, // 当前用户信息
        }
    },
    mounted() {
        this.getUserList();
        this.GetEnum();
        this.setForm();
    },
    methods: {
        /**关闭弹窗 */
        handleClose() {
            this.$parent.modalStatus = 0
        },

        /**打开添加订单弹窗 */
        openUserList(type) {
            this.selectType = type;
            this.modalStatus = 2;
        },
        //选择用户监听
        handleObject(obj) {
            if (this.selectType == 1) {
                this.form.phone = obj.phone
                if (obj.truename != '') {
                    this.fwsUsername = obj.truename
                } else {
                    this.fwsUsername = obj.phone
                }
            } else if (this.selectType == 2) {
                this.form.fromPhone = obj.phone
                if (obj.truename != '') {
                    this.form.fromUserName = obj.truename
                } else {
                    this.form.fromUserName = obj.phone
                }
            }
        },
        // 服务对象用户名监听
        changeUserName() {
            if (this.form.fromUserName == '') {
                this.form.fromPhone = ''
            }
        },
        /**获取用户列表 */
        async getUserList(val) {
            this.shopLoading = true;
            const { list } = await userlist({
                key: val || '',
                state: 1,
                PageIndex: this.PageIndex,
                PageSize: this.pageSize
            })
            this.shopLoading = false;
            this.userList = list;
            this.userList.map(item => {
                return item.value = "手机号：" + item.phone + "; 姓名：" + item.truename
            })
        },
        async querySearchAsync(queryString, cb) {
            var results = [];
            if (queryString) {
                this.getUserList(queryString)
                results = this.userList;
            } else {
                results = this.userList;
            }
            cb(results);
        },
        handleSelect(item) {
            console.log(item);
            this.form.fromPhone = item.phone
            if (item.nickname != '') {
                this.form.fromUserName = item.truename
            } else {
                this.form.fromUserName = item.phone
            }
        },
        // 获取枚举
        async GetEnum() {
            const res = await GetEnum();
            this.OrderTypeList = res.data['OrderType'];
        },
        /**表单参数初始化 */
        setForm() {
            if (this.info.id) {
                this.form = this.info
                if (this.form.trueName) {
                    this.fwsUsername = this.form.trueName;
                } else {
                    this.fwsUsername = this.form.phone;
                }
                this.isdisabled = true
            } else {
                this.form = {
                    orderType: 1,
                    amt: 0,
                    phone: "",
                    orderSource: "",
                    fromPhone: "",
                    fromUserName: "",
                };
                this.isdisabled = false
                this.fwsUsername = ''
            }
        },
        /**（提交） */
        async submit() {
            try {
                try {
                    await this.$refs['forms'].validate()
                } catch (e) {
                    console.log(e)
                    return
                }
                const { success, msg } = await OrderAdd(this.form)
                if (success) {
                    this.handleClose();
                }
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            } catch (e) {
                // 取消
                console.log(e)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
</style>